<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="out_box">
			<div class="title_box">
				热门推荐
			</div>
			<div class="place_box_tab">
				<ul class="my_Ul">
					<!-- <li>热门推荐fsdf</li>
					<li>热门推荐cxbvx</li>
					<li>热门推荐fgs</li>
					<li>热门推荐das</li>
					<li>大把数据的</li>
					<li>水电费卡</li> -->
				</ul>
				<span class="underline" style="left:0px"></span>
			</div>
			<div class="place_box_card">
				<!-- <div class="item">
					<dl>
						<dt>全球投票城市</dt>
						<dd>按时发放</dd>
						<dd>按时发放</dd>
						<dd>按时发放</dd>
						<dd>按时发放</dd>
						<dd>按时发放</dd>
					</dl>
				</div> -->
			</div>
		</div>
		<div class="out_box">
			<div class="title_box">
				主题目的地
			</div>
			
		</div>
	</body>
</html>
<script type="module">
	import hotCityApi from "./Api/hotCityApi.js"
	// import catchUtil from "./util/catchUtil.js"
	
	const myUl = document.querySelector('.my_Ul');
	const underline = document.querySelector('.underline')
	const placeHomeCard = document.querySelector('.place_box_card')
	let liList = undefined
	let curentIndex = 0;

	myUl.onmousemove = function(e) {
		//阻止重复执行
		if (curentIndex == e.target.getAttribute('data-index')) {
			return;
		}
		liList[curentIndex].classList.remove('li_choosed')
		underline.innerText = e.target.innerText;
		curentIndex = e.target.getAttribute('data-index');
		e.target.classList.add('li_choosed')
		//改变指示条的位置
		let leftWidth = 25;
		for (let li of liList) {
			if (curentIndex == li.getAttribute('data-index')) {
				break;
			}
			leftWidth += li.offsetWidth;
		}
		underline.style.left = leftWidth + 'px';
		toGetHotCity(e.target.getAttribute('data-id'));
		// sessionStorage.setItem(key,value)
		sessionStorage.setItem('data','')
	}


	hotCityApi.getHotCityTitle().then(data => {
		let html = ``
		for (let key in data) {
			html += `<li data-index="${key}" data-id="${data[key].id}">${data[key].title}</li>`
		}
		myUl.innerHTML += html;
		liList = myUl.children;
		underline.innerText = data[0].title;
		underline.style.left = '25px'
		liList[curentIndex].classList.add('li_choosed')
		toGetHotCity(data[curentIndex].id)
	})

	//调用
	toGetHotCity();
	
	function toGetHotCity(titleId) {
		//获取缓存的数量
		// const hotCountry = catchUtil.getSessionStorage('hotCountry');
		// if(hotCountry[titleId]){
		// 	cityInfoRrfresh(hotCountry[titleId])
		// 	return
		// }
		hotCityApi.getHotCity({
			titleId: titleId
		}).then(data => {
			// hotCountry[titleId] = data;
			// catchUtil.setSessionStorage('hotCountry',hotCountry);
			// cityInfoRrfresh(data)
			let html = ``
			for (let index in data) {
				const val = data[index]
				let ddHtml = ``
				for (let key in val.cityList) {
					ddHtml += `<dd>${val.cityList[key]}</dd>`
				}
				html += `<div class="item">
						<dl>
							<dt>${val.country}</dt>
							${ddHtml}
						</dl>
					</div>`
			}
			placeHomeCard.innerHTML = html
		})
	}
	
	// cityInfoRrfresh(data)
	// //城市渲染数据
	// function cityInfoRrfresh(data){
	// 	let html = ``
	// 	for (let index in data) {
	// 		const val = data[index]
	// 		let ddHtml = ``
	// 		for (let key in val.cityList) {
	// 			ddHtml += `<dd>${val.cityList[key]}</dd>`
	// 		}
	// 		html += `<div class="item">
	// 				<dl>
	// 					<dt>${val.country}</dt>
	// 					${ddHtml}
	// 				</dl>
	// 			</div>`
	// 	}
	// 	placeHomeCard.innerHTML = html
	// }
	
	hotCityApi.getThemeDist().then(data=>{
		console.log(data)
	})
</script>

<style lang="less">
	* {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}

	body {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.out_box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title_box {
		font-size: 24px;
		color: #000;
		line-height: 24px;
		text-align: center;
		font-weight: 500;
		margin-bottom: 35px;
		margin-top: 35px;
	}

	.place_box_tab {
		margin-bottom: 40px;
		position: relative;
	}

	.place_box_tab li {
		float: left;
		font-size: 18px;
		padding: 0px 25px 0px 25px;
		display: inline-block;
		line-height: 30px;
		color: #929292;
		border-bottom: 1px solid #e5e5e5;
		overflow: visible;
		cursor: pointer;
	}

	.place_box_tab .li_choosed {
		color: #000000;
	}

	.underline {
		position: absolute;
		height: 100%;
		line-height: 30px;
		border-bottom: 2px solid #28b76c;
		bottom: 1px px;
		color: hsla(0, 0%, 100%, 0);
		font-size: 18px;
		cursor: pointer;
		z-index: -1;
		transition: width, left 0.2s linear;
	}

	.place_box_card {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 326px;
			margin-bottom: 24px;
		}

		.item dt {
			font-size: 16px;
			height: 20px;
			line-height: 20px;
			margin-bottom: 12px;
			font-weight: 500;
		}

		.item dd {
			font-size: 14px;
			line-height: 20px;
			font-weight: 500;
			display: inline-block;
			color: black;
			padding: 4px 8px;
		}
	}
</style>
